<template>
	<view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
			<view class="infobar flex-btw">
				<view class="monthPicker" @click="showMonthPicker=true">
					{{searchMonth ? (searchMonth.year + '/' + searchMonth.month) : '本月'}}
					 <u-icon class="icon" name="arrow-down-fill" color="#7d7d7d" size="24"></u-icon>
				</view>
				<u-picker :show="showMonthPicker" mode="time" @close="showMonthPicker = false;" :params="monthPickerParams" start-year="2019" :end-year="$global.currentYear" @confirm="monthConfirm"></u-picker>
				<view class="infos">
          <view class="item add">
            <text class="fh">+</text>
            <text class="score">{{addScore}}</text>
            <text class="t">积分</text>
          </view>
          <view class="item minus">
            <text class="fh">-</text>
            <text class="score">{{costScore}}</text>
            <text class="t">积分</text>
          </view>
        </view>
			</view>
			<view class="orderList">
				<view class="no-result" v-if="!list.length">
					<u-empty text="无记录" mode="order"></u-empty>
				</view>
				<view class="item" v-for="(item, index) in list" :key="index">
          <view class="body">
            <view class="title">{{item.title}}</view>
            <view class="date">{{item.date}}</view>
            <view class="score" :class="item.type == 1 ? 'get' : 'cost'">{{item.num}}</view>
          </view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{type: 1, date: '2020-01-23 09:15', title: '分享内容', num: 10},
					{type: 1, date: '2020-01-23 09:15', title: '充值续费', num: 5},
					{type: 1, date: '2020-01-23 09:15', title: '约课签到', num: 7},
					{type: 2, date: '2020-01-23 09:15', title: '商家抵扣', num: -20}
				],
				showMonthPicker: false,
				searchMonth: '',
				monthPickerParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		onBackPress() {
			if (this.showMonthPicker) {
				this.showMonthPicker = false;
				return true;
			}
    },
    computed: {
      addScore: function () {
        return this.$global.sum(this.list.map(n => {
          if (n.num > 0) {
            return n.num;
          }
          return 0;
        }));
      },
      costScore: function () {
        return this.$global.sum(this.list.map(n => {
          if (n.num < 0) {
            return -n.num;
          }
          return 0;
        }));
      }
    },
		methods: {
			bindPickerChange: function(e) {
				this.currentD = this.dList[e.detail.value];
			},
			monthConfirm: function (data) {
				this.searchMonth = data;
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
.scroll-Y {
	background: #f5f5f5;
	height: calc(100vh);
	// #ifdef H5
	height: calc(100vh - 44px);
	// #endif
}
.orderList {
	.item {
		background: #fff;
    width: 100%;
    &:not(:last-child) {
      .body {
        border-bottom: 1px solid #f7f7f7;
      }
    }
		.body {
      position: relative;
			padding: 10px 0 10px;
			margin: 0 15px;
			.title {
        font-size: 15px;
        font-weight: bold;
      }
      .date {
        font-size: 13px;
        font-weight: normal;
        display: block;
        color: #b7b7b7;
      }
      .score {
        position: absolute;
        right: 0;
        top: 30%;
        font-size: 14px;
        &.get {
          color: #33c00f;
          &::before {
            content: '+';
          }
        }
        &.cost {
          color: #cb5446;
        }
      }
		}
	}
}
.infobar {
  height: 40px;
  padding: 0px 10pt;
	align-items: center;
	position: sticky;
	top: 0px;
	background: #F5F5F5;
	z-index: 1;
	.monthPicker {
		position: relative;
		background: #fff;
		padding: 0 15pt 0 10pt;
		border-radius: 50px;
		font-size: 13px;
		height: 20px;
		line-height: 20px;
		.icon {
			position: absolute;
			right: 6px;
			top: 1px;
		}
	}
	.infos {
    display: flex;
		.item {
      margin-left: 10px;
      .fh {
        border-radius: 50%;
        font-size: 18px;
        width: 13px;
        height: 13px;
        text-align: center;
        line-height: 12px;
        display: inline-block;
      }
      .score {
        font-size: 13px;
        margin: 0 5px 0 2px;
      }
      &.minus {
        color: #cb5446;
        .fh {
          border: 1px solid #cb5446;
        }
      }
      &.add {
        color: #33c00f;
        .fh {
          border: 1px solid #33c00f;
        }
      }
      .t {
        font-size: 13px;
        color: #000;
      }
    }
	}
}
</style>